<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="8">
        <el-input
          :placeholder="$t('table.placeholder')"
          clearable
          v-model="queryForm.query"
        ></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="queryEngine">{{
        $t('table.search')
      }}</el-button>
      <el-button type="primary" @click="handleDialogValue()">{{
        $t('table.addriskengine')
      }}</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        :width="item.width"
        :prop="item.prop"
        :label="$t(`enginetable.${item.label}`)"
        v-for="(item, index) in options"
        :key="index"
      >
        <template v-slot="{ row }" v-if="item.prop === 'is_use'">
          <el-switch v-model="row.is_use" disabled />
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'is_default'">
          <el-switch v-model="row.is_default" disabled />
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'delay_need'">
          <el-switch v-model="row.delay_need" disabled />
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'work_need'">
          <el-switch v-model="row.work_need" disabled />
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'honest_need'">
          <el-switch v-model="row.honest_need" disabled />
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'age_need'">
          <el-switch v-model="row.age_need" disabled />
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('table.Operations')" width="80">
        <template #default="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="handleDialogValue(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:currentPage="queryForm.pagenum"
      v-model:page-size="queryForm.pagesize"
      :page-sizes="[2, 5, 10, 15]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    v-if="dialogVisible"
    @initEngineList="initGetEngineList"
    :dialogTableValue="dialogTableValue"
  />
</template>

<script setup>
import { ref } from 'vue'
import { Search, Edit } from '@element-plus/icons-vue'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { getRiskengine } from '@/api/riskengine'
import { options } from './options'
import { isNull } from '@/utils/filters'
import Dialog from './components/dialog.vue'
// import { useI18n } from 'vue-i18n'

// const i18n = useI18n()
const queryForm = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})
const total = ref(0)
let tempTableDate = []
const tableData = ref([])
const dialogVisible = ref(false)

const dialogTitle = ref('')
const dialogTableValue = ref({})

const initGetEngineList = async () => {
  const res = await getRiskengine()
  console.log(res)
  total.value = res.data.length
  tableData.value = res.data
  tempTableDate = res.data
  const qian =
    queryForm.value.pagenum * queryForm.value.pagesize -
    queryForm.value.pagesize
  const hou = qian + queryForm.value.pagesize
  tableData.value = tempTableDate.slice(qian, hou)
}
initGetEngineList()

const handleSizeChange = (pageSize) => {
  queryForm.value.pagenum = 1
  queryForm.value.pagesize = pageSize
  const qian =
    queryForm.value.pagenum * queryForm.value.pagesize -
    queryForm.value.pagesize
  const hou = qian + queryForm.value.pagesize
  tableData.value = tempTableDate.slice(qian, hou)
}

const handleCurrentChange = (pageNum) => {
  queryForm.value.pagenum = pageNum
  const qian = pageNum * queryForm.value.pagesize - queryForm.value.pagesize
  const hou = qian + queryForm.value.pagesize
  tableData.value = tempTableDate.slice(qian, hou)
}

const queryEngine = () => {
  const tableResult = tempTableDate.filter(
    (item) => item.id.indexOf(queryForm.value.query) !== -1
  )
  const qian =
    queryForm.value.pagenum * queryForm.value.pagesize -
    queryForm.value.pagesize
  const hou = qian + queryForm.value.pagesize
  tableData.value = tableResult.splice(qian, hou)
}

const handleDialogValue = (row) => {
  if (isNull(row)) {
    dialogTitle.value = '添加引擎'
    dialogTableValue.value = {}
  } else {
    dialogTitle.value = '编辑引擎'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }

  dialogVisible.value = true
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

:deep(.el-input__suffix) {
  align-items: center;
}

:deep(.el-pagination) {
  padding-top: 16px;
  box-sizing: border-box;
  text-align: right;
}
</style>
